<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>configmap详情</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="/lib/layui-v2.6.3/css/layui.css" media="all">
    <link rel="stylesheet" href="/css/public.css" media="all">
    <script src="/lib/layui-v2.6.3/layui.js" charset="utf-8"></script>
    <script src="/js/lay-config.js?v=1.0.4" charset="utf-8"></script>
    <script src="/js/xkube.js?v=1" charset="utf-8"></script>
<style>
/**
textarea{
    display: inline-block;
    resize: vertical;
    padding: 5px 15px;
    line-height: 1.5;
    box-sizing: border-box;
    color: #dedcee;
    background-color: #272822;
    border: 1px solid #dcdfe6;
    border-radius: 4px;
    transition: border-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
    width:100%;
    height:200px;
}
*/
.textarea{
            width: 100%;
            background-color: #272822;
            color: #dedcee;
            min-height: 20px;
            max-height: 450px;
            _height: 120px;
            margin-left: auto;
            margin-right: auto;
            padding: 3px;
            outline: 0;
            border: 1px solid #a0b3d6;
            font-size: 13px;
            word-wrap: break-word;
            text-align: justify;
            overflow-x: hidden;
            overflow-y: auto;
            -webkit-user-modify: read-write-plaintext-only;
            border-color: rgba(82, 168, 236, 0.8);
            box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1), 0 0 8px rgba(82, 168, 236, 0.6);
}
.textarea2{
            width: 100%;
            background-color: #272822;
            color: #dedcee;
            height:250px;
            margin-left: auto;
            margin-right: auto;
            padding: 3px;
            outline: 0;
            border: 1px solid #a0b3d6;
            font-size: 13px;
            word-wrap: break-word;
            text-align: justify;
            overflow-x: hidden;
            overflow-y: auto;
            -webkit-user-modify: read-write-plaintext-only;
            border-color: rgba(82, 168, 236, 0.8);
            box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1), 0 0 8px rgba(82, 168, 236, 0.6);
}
</style>
</head>
<body>
<div class="layuimini-container">
    <div class="layuimini-main">
            <fieldset class="layui-elem-field layui-field-title" style="margin-top: 10px;">
                <legend>基本信息</legend>
            </fieldset>  

              <button class="layui-btn" id="EditYamlBtn">yaml编辑</button>
              <button class="layui-btn" id="YamlBackup">yaml备份</button>
              <button class="layui-btn layui-btn-danger" id="DelBtn">删除</button>
              <br><br>
              <blockquote class="layui-elem-quote layui-quote-nm">
                  <table class="layui-table" lay-even="" lay-size="lm">
                    <colgroup>
                      <col width="150">
                      <col width="250">
                      <col width="150">
                      <col>
                    </colgroup>
                    <tbody>
                      <tr>
                        <td>名称:</td>
                        <td><div id="appNameTitle"></div></td>
                        <td>命名空间:</td>
                        <td><div id="nameSpace"></div></td>
                      </tr>
                      <tr>
                        <td>创建时间:</td>
                        <td><div id="createTime"></div></td>
                        <td>标签:</td>
                        <td><div id="labels"></div></td>
                      </tr>
                    </tbody>
                  </table> 
              </blockquote> 

            <fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
                <legend>配置信息</legend>
            </fieldset>
                  <table class="layui-table" lay-even="" lay-size="lm">
                    <colgroup>
                      <col width="250">
                      <col>
                    </colgroup>
                  <thead>
                    <tr>
                      <th>键</th>
                      <th>值</th>
                    </tr> 
                  </thead>
                  <tbody id="currentTableId">
                  </tbody>
                  </table> 
    </div>
</div>
</body>

<script>
    layui.use(['form', 'table','miniTab'], function () {
        var $ = layui.jquery,
            form = layui.form,
            table = layui.table;
            miniTab = layui.miniTab,
            miniTab.listen();

        var configmapName = getQueryString("configmapName");
        $('#appNameTitle').html(configmapName);

        $('#EditYamlBtn').on("click",function(){
                layer.open({
                    title: 'yaml',
                    type: 2,
                    shade: 0.2,
                    maxmin:true,
                    shadeClose: true,
                    area: ['45%', '92%'],
                    content: '/page/xkube/configmapYaml.html'+location.search,
                });
        });

        $('#YamlBackup').on("click",function(){
                miniTab.openNewTabByIframe({
                  href:'page/xkube/yamlBackup.html'+location.search+"&resType=configmap"+"&resName="+configmapName,
                  title:configmapName+"备份",
                }); 
        });

        $('#DelBtn').on("click",function(){
            layer.confirm('确定删除'+configmapName+'?', {icon: 3, title:'提示',yes: function(index){
        			  $.ajax({
        			   url: "/xkube/cm/v1/Del"+location.search,
        			   type: "GET",
                 data: JSON.stringify(bodystr),
                 dataType: "json",
        			   success: function (resp) {
        					  if (resp.code == 0 ) {
                      layer.msg('删除成功', {icon: 1});
                    }else{
                      layer.msg(resp.msg,{icon:2});
                    }
        				  }
        		    });
              },
              cancel: function(index, layero){ 
                    layer.close(index);
              } 
            });
        });    

        //detai详细
        $.get('/xkube/cm/v1/Detail' + location.search, function (resp) {
  				  if (resp.configmapName != '' ) {
                //console.log(resp);
                //var configmapName = resp.configmapName;
                //$('#configmapName').html(configmapName);
  
                var createTime = resp.createTime;
                $('#createTime').html(createTime);
  
                var nameSpace = resp.nameSpace;
                $('#nameSpace').html(nameSpace);
  
                var labels = resp.labels;
                $('#labels').html(labels);

                var html = "";
        				$.each(resp.data,function(i,item){
                  //console.log(unescape(item.value));
                  html += '<tr>' +
                        '<td>'+item.key+'</td>' +
                        //'<td><div class="textarea" contenteditable="true">'+unescape(item.value)+'</div></td>' +
                          //'<td><pre class="layui-code" lay-skin="notepad" lay-encode="true">'+item.value+'</pre></td>' +
                          '<td><textarea class="textarea2">'+unescape(item.value)+'</textarea></td>'+
                      '<tr>'
        				});
                //该方式显示xml格式的文件暂时有问题
        				$('#currentTableId').html(html);

          }else{
            layer.msg('请重新刷新',{icon:2});
          }
		    });
    });

</script>

</body>
</html>